<template>
  <div class="exam-index">
    <mu-sub-header>做题须知</mu-sub-header>
    <ul class="tips-list">
      <li class="tips-item">
        <p class="tips-main">你不是为了做对而做题的</p>
        <p class="tips-sub mu-text-secondary">做题的目的是为了区分题目难度，所以请不要查了答案再去做，或者使用其他电子设备。</p>
        <p class="tips-sub mu-text-secondary">请按照自己的真实知识水平做题，诚实地给你结果，这样我们才能更好地统计题目难度。</p>
      </li>
      <li class="tips-item">
        <p class="tips-main">有错题要及时报告</p>
        <p class="tips-sub mu-text-secondary">如果你觉得某个题有问题，你可以在题库里找到这个题目，在最下方留言，这样作者能看到你的留言。</p>
        <p class="tips-sub mu-text-secondary">如果你觉得某个题很有问题，你还可以勾选“请求重审此题”，这样审题组根据你的意见再次检查。</p>
      </li>
    </ul>
    <div class="exam-actions">
      <mu-button color="success" full-width @click="start()">朕知道了</mu-button>
    </div>
  </div>
</template>

<script>
import api from '@/api'
export default {
  name: 'ExamIndex',
  data() {
    return {
      nextId: 0
    }
  },
  created() {
    this.getNextId()
  },
  methods: {
    async getNextId() {
      try {
        const data = await api.getNextUnexamedQuestion()
        if (data) {
          this.nextId = data.id
          return data.id
        } else {
          return 0
        }
      } catch (err) {
        this.$apiCatch(err)
      }
      return 0
    },
    async start() {
      let id = 0
      if (this.nextId === 0) {
        id = await this.getNextId()
      } else {
        id = this.nextId
      }
      if (id !== 0) {
        this.$router.push({
          name: 'exam-question',
          params: {
            id
          }
        })
      } else {
        this.$toast.success('所有题目都做完啦，快犒劳一下自己！')
      }
    }
  }
}
</script>

<style scoped>
.exam-index {
  padding: 12px;
}
.exam-actions {
  margin: 12px auto 0;
  width: 500px;
}
.tips-list {
  padding-left: 30px;
  list-style: decimal;
}
.tips-main {
  margin: 6px 0;
  font-size: 1.2em;
}

.is-phone .exam-actions {
  width: 100%;
}
</style>
